<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人资料</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f5f5f5;
}
.profile-content {
  background-color: #fff;
  padding: 20px;
}
.avatar-section {
  text-align: center;
  margin-bottom: 30px;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.edit-avatar {
  color: #ff6b6b;
  text-decoration: none;
  font-size: 14px;
}
.info-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.info-label {
  width: 80px;
  color: #333;
}
.info-value {
  flex: 1;
  color: #666;
}
.gender-options {
  display: flex;
  gap: 20px;
}
.gender-option {
  display: flex;
  align-items: center;
  gap: 5px;
}
.save-btn {
  display: block;
  width: 90%;
  margin: 30px auto;
  padding: 15px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}
</style>
</head>
<body>
<main class="profile-content">
<div class="avatar-section">
<img src="placeholder.jpg" alt="用户头像" class="avatar" />
<a href="#" class="edit-avatar">修改头像</a>
</div>

<div class="info-item">
<span class="info-label">账号</span>
<span class="info-value">zhousg</span>
</div>

<div class="info-item">
<span class="info-label">昵称</span>
<span class="info-value">后海没有鱼</span>
</div>

<div class="info-item">
<span class="info-label">性别</span>
<div class="info-value">
<div class="gender-options">
<label class="gender-option">
<input type="radio" name="gender" checked />
<span>男</span>
</label>
<label class="gender-option">
<input type="radio" name="gender" />
<span>女</span>
</label>
<label class="gender-option">
<input type="radio" name="gender" />
<span>未知</span>
</label>
</div>
</div>
</div>

<div class="info-item">
<span class="info-label">生日</span>
<span class="info-value">2015-03-15</span>
</div>

<div class="info-item">
<span class="info-label">所在地</span>
<span class="info-value">北京市 北京市 东城区</span>
</div>

<div class="info-item">
<span class="info-label">职业</span>
<span class="info-value">市场营销专员</span>
</div>

<button class="save-btn">保存资料</button>
</main>
<!-- 引入调试控制台 -->
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.2.1/eruda.min.js"></script>
<script>eruda.init();</script>
<script>
     function changeColor() {
       document.querySelector(".save-btn").style.backgroundColor = "red";
     }
    document.querySelector('.edit-avatar').addEventListener('click', () => {
      window.hdm.openGallery().then(res => {
         document.querySelector('.avatar').src = res
      })
   })
</script>
</body>
</html>
